<template>
  <div
    class="topicItemCompBox"
    :class="{
      dark: themeRef.state.themeState == 'drak',
      light: themeRef.state.themeState == 'light',
    }"
  >
    <div class="hotBoxContent">
      <router-link
        :to="{
          path: `/Hot/searchBlog/${topicItemInfo.id}`,
          params: { id: topicItemInfo.id },
        }"
      >
        <div class="title">
          <i
            :style="{
              color: '#fff',
              backgroundImage:
                'url(' + (level - 1 < 3 ? hotArr[+level - 1] : hotArr[3]) + ')',
              paddingLeft: (level - 1 < 3 ? 6 : 0) + 'px',
              lineHeight: (level - 1 < 3 ? 30 : 25) + 'px',
            }"
            >{{ level }}</i
          >
          {{ topicItemInfo.title }}
        </div>
      </router-link>
      <router-link
        :to="{
          path: `/Hot/searchBlog/${topicItemInfo.id}`,
          params: { id: topicItemInfo.id },
        }"
      >
        <div class="content">{{ topicItemInfo.content }}</div>
      </router-link>
      <div class="opt">
        阅读： <span>{{ topicItemInfo.seeNumber }}</span> 讨论：
        <span>{{ topicItemInfo.topicNumber - 1 }}</span>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Options } from "vue-class-component";
import { useStore } from "vuex";
import "../../../../../utils/type";
@Options({
  components: {},
  props: {
    topicItemInfo: Object,
    level: String,
  },
  // 实例挂载后Hook
  mounted() {
    // console.log(this.topicItemInfo);
  },
})
export default class topicItemCompBox extends Vue {
  themeRef: any = useStore();
  hotArr: Array<String> = [
    "https://www.lv666.top/IMG/1655009460267_hotRank1.png",
    "https://www.lv666.top/IMG/1655009470630_hotRank2.png",
    "https://www.lv666.top/IMG/1655009476688_hotRank3.png",
    "https://www.lv666.top/IMG/1655009480886_hotRank4.png",
  ];
}
</script>

<style lang="less" scoped>
// @import url("");
@import url("./index.less");
</style>